<template>
    <div class="card">
        <slot name="title">
            <div class="card_title">
                <div class="card_title_label">{{title}}</div>
                <div class="l-f">
                    <img class="card_title_line" src="@/assets/images/title-line.png" alt="">
                    <img class="card_title_sanjiao" src="@/assets/images/title-sanjiao.png" alt="">
                </div>
            </div>
        </slot>
        
        <slot/>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: ''
            }
        }
    }
</script>

<style lang="scss" scoped>
.card {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0px 14px 15px -8px rgba(141, 101, 101, 0.3);
    background-color: #ffffff;
    &_title {
        &_label {
            font-size: 24px;
            color: #000000;
            font-weight: 700;
            position: relative;
            padding-left: 20px;
            &::before {
                content: "";
                display: block;
                width: 7px;
                height: 24px;
                background-color: #E4493E;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        &_line {
            height: 3px;
            width: 100%;
        }
        &_sanjiao {
            margin-left: 2px;
            width: 7px;
            height: 7px;
        }
    }
}
</style>